import React,{Component} from 'react'
import './radio_item.scss'
import PropTypes from 'prop-types';
class RadioItem extends  Component{
    constructor(props){
        super(props)
        this.state={
            text:''
        }
       this.onCheck=this.onCheck.bind(this);
       this._onChange=this._onChange.bind(this)
    }
    static propTypes={
        isActive:PropTypes.bool
    }
    static defaultProps = {
        isActive:false
    }
    onCheck(){
      this.setState({
        text:''
      })   

      this.props.onCheck(this.state.text,this.props.index);
    }
    _onChange(e){
        let  text=e.target.value;
        console.log("text",text);
        this.setState({text});
        this.props.onCheck(text,this.props.index);
    }
    render(){
       let {label,placeholder,check}=this.props;
       return(
           <div className="radio-item">
                 <div className="radio-item-info" onClick={this.onCheck}>
                     <a href="javascript:;" className={["radio-btn",check?"radio-btn-active":""].join("   ")}></a>
                     <label className="label">{label}</label>
                   </div>
                <input 
                 value={!check?'':this.state.text}
                 className="input" 
                 disabled={!check}
                 type="text" 
                 onChange={this._onChange}
                 placeholder={placeholder}/>
            </div>
        )
    }
}

export  default RadioItem